<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Action</title>
</head>

<body>
  <div>
    <p>需要执行异步操作,那么就需要使用Action</p>
    <button @click="$store.dispatch('increateAsync',3)"></button>

    <p>使用mapActions</p>
    <button @click="increateAsync(3)"></button>
  </div>
  <script>
    import {
      mapActions
    } from 'vuex'
    export default {
      computed: {
        /* 使用数组方法肯导致变量名重复 */
        /* ...mapState(['count', 'msg']) */
        /* 使用对象的方式给状态重新命名 */
      },
      methods: {
        ...mapActions(['increateAsync'])
      }
    }
  </script>
  <script>
    //假设这是store.js文件
    export default new Vuex.Store({
      state: {
        count: 0,
        msg: 'Hello Vuex'
      },
      mutations: {},
      actions: {
        //第一个参数是上下文,这个对象有我们需要的成员(state,commit,getter等成员)
        //第二个参数是我们传的参数
        increateAsync(context, payload) {
          setTimeout(() => {
            //第一个参数方法名,第二个参数是参数
            context.commit('increate', payload)
          }, 2000);
        }
      },
      modules: {}
    })
  </script>
</body>

</html>